<template>
	<view class="group-header">
		<view class="item-header">
			<view class="group-avator">
				<image src="@/static/images/talk.png" mode="aspectFill"></image>
			</view>
			<view class="group-info">
				<text class="group-type">{{typetext}}</text>
				<text class="group-name">{{chattitle}}</text>
			</view>
		</view>
		<view class="group-people">
			<view class="title">
				活动成员
			</view>
			<scroll-view scroll-y="true" style="height: 900rpx;" @scrolltolower="scrollPage" v-if="peopleList.length>0">
				<view class="frined-list" v-for="(item,index) in peopleList" :key="item.id">
					<view @click="toUserPage(item.id)">
						<image v-if="item.user_info.avatar!=''" :src="baseurl + '/' +item.user_info.avatar" mode="aspectFill"></image>
						<image v-else src="@/static/images/avatar.png" mode="aspectFill"></image>
					</view>
					<view class="content">
						<view class="name">
							{{item.user_info.username}}
						</view>
						<view class="time-info">
							<text class="text1">ID:{{item.user_info.account}}</text>
						</view>
					</view>
					<view class="follow-btn" v-if="item.user_info.relationship==0" @click="follower(0,item.user_info.id)">
						关注
					</view>
					<view class="follow-btn" v-if="item.user_info.relationship==1" @click="follower(0,item.user_info.id)">
						回关
					</view>
					<view class="eachOther-btn" v-if="item.user_info.relationship==2" @click="follower(1,item.user_info.id)">
						已关注
					</view>
					<view class="eachOther-btn" v-if="item.user_info.relationship==3" @click="follower(1,item.user_info.id)">
						互相关注
					</view>
				</view>
			</scroll-view>
		</view>
	</view>
</template>

<script setup>
	import { onLoad } from '@dcloudio/uni-app'
	import { ref } from 'vue'
	import { getGroupPeopleAPI } from '@/api/chat.js'
	import { useUserStore } from '@/store/modules/user.js'
	import { throttle } from '@/utils/utils';
	const userstore = useUserStore()
	const page = ref(1)
	const total = ref(0)
	const groupId = ref('')
	const peopleList = ref([])
	const chattitle = ref('')
	const typetext = ref('')
	const baseurl = ref('')
	onLoad((option) => {
		baseurl.value = uni.getStorageSync('baseUrl')
		groupId.value = option.groupId
		getGroupPeopleList()
	})
	const getGroupPeopleList = throttle(async () => {
		let res = await getGroupPeopleAPI({
			page: page.value,
			user_activity_id: groupId.value
		})
		if (res.code == 200 && res.data) {
			uni.hideLoading()
			total.value = res.data.activity_apply.total
			chattitle.value = res.data.chat_title
			typetext.value = res.data.type_text
			peopleList.value = peopleList.value.concat(res.data.activity_apply.data)
		} else {
			uni.hideLoading()
		}
	}, 200)
	const scrollPage = () => {
		if (peopleList.value.length >= total.value) {
			uni.showToast({
				title: "没有更多了",
				icon: "none",
				mask: true,
				duration: 800
			})
			return
		}
		page.value++

		uni.showLoading({
			title: "正在加载...",
			mark: true
		})
		getGroupPeopleList()
	}
	// 关注or取关
	const follower = throttle(async (type, userId) => {
		if (type == 0) {
			let res = await userstore.followOrClose({
				id: userId,
				type: '0'
			})
			if (res.code == 200) {
				uni.$uv.toast('关注成功')
				page.value = 1
				peopleList.value = []
				getGroupPeopleList()
			}
		} else {
			let res = await userstore.followOrClose({
				id: userId,
				type: '1'
			})
			if (res.code == 200) {
				uni.$uv.toast('取关成功')
				page.value = 1
				peopleList.value = []
				getGroupPeopleList()
			}
		}
	}, 200)
</script>
<style>
	/* 	page {
		background-color: #f6f6f6;
	} */
</style>
<style lang="scss" scoped>
	.group-header {
		.item-header {
			text-align: center;

			.group-avator {
				padding: 60rpx 0 40rpx 0;

				image {
					border-radius: 50%;
					width: 134rpx;
					height: 134rpx;
				}
			}

			.group-info {
				display: flex;
				align-items: center;
				justify-content: center;

				.group-type {
					padding: 0 12rpx;
					height: 40rpx;
					background: #FFF1F3;
					border-radius: 8rpx 8rpx 8rpx 8rpx;
					font-weight: 400;
					font-size: 22rpx;
					color: #FE3052;
					line-height: 40rpx;
					text-align: center;
				}

				.group-name {
					padding-left: 12rpx;
					font-weight: bold;
					font-size: 40rpx;
					color: #222222;
				}
			}
		}

		.group-people {
			width: 750rpx;
			background: #FFFFFF;
			border-radius: 32rpx 32rpx 0rpx 0rpx;
			padding: 30rpx;
			margin-top: 60rpx;

			.title {
				font-weight: bold;
				font-size: 32rpx;
				color: #222222;
			}
		}
	}

	.frined-list {
		display: flex;
		align-items: center;
		padding: 20rpx 0;

		image {
			width: 100rpx;
			height: 100rpx;
			border-radius: 50%;
		}

		.content {
			flex: 1;
			margin-left: 24rpx;

			.name {
				font-weight: 400;
				font-size: 32rpx;
				color: #222222;
			}

			.time-info {
				padding: 8rpx 0;

				.text1 {
					font-weight: 400;
					font-size: 28rpx;
					color: #666666;
				}
			}

		}

		.banner-img {
			.img {
				border-radius: 0;
				width: 100rpx;
				height: 100rpx;
			}
		}
	}

	.eachOther-btn {
		width: 160rpx;
		height: 64rpx;
		background: #F6F6F6;
		border-radius: 32rpx 32rpx 32rpx 32rpx;
		font-weight: bold;
		font-size: 28rpx;
		color: #666666;
		line-height: 64rpx;
		text-align: center;
	}

	.follow-btn {
		width: 160rpx;
		height: 64rpx;
		background: #FE3052;
		border-radius: 32rpx 32rpx 32rpx 32rpx;
		font-weight: bold;
		font-size: 28rpx;
		color: #FFFFFF;
		line-height: 64rpx;
		text-align: center;
	}
</style>